<template>
  <div class="app-container">
    <!-- 主内容区 -->
    <main class="home" ref="homeRef">
      <p 
        class="welcome-text" 
        v-for="i in totalCount" 
        :key="i"
        :class="{ 'welcome-text--highlight': i <= 3 }"
      >
        {{ baseText }} {{ i <= 3 ? i : '' }}
      </p>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div v-html="copyright"></div>
    </footer>
  </div>
</template>

<script setup name="index">
import { ref, onMounted, watchEffect } from 'vue';
import { useWindowSize } from "@vueuse/core";
import defaultSettings from "@/settings";

// 核心配置
const baseText = ref('虫子来了，欢迎你！');
const totalCount = ref(70); // 内容数量
const copyright = ref(defaultSettings.copyright);
const homeRef = ref(null);
const { height: windowHeight } = useWindowSize();

// 动态调整高度，适配1440px宽度布局
const adjustHomeHeight = () => {
  if (!homeRef.value) return;
  
  const headerHeight = 55; // 与Layout中保持一致
  const footerHeight = homeRef.value.nextElementSibling?.offsetHeight || 50;
  const contentWrapper = document.querySelector('.content-wrapper');
  const contentWrapperPadding = 48; // 上下padding总和
  
  // 计算可用高度
  const availableHeight = windowHeight.value - headerHeight - contentWrapperPadding - footerHeight;
  const contentNaturalHeight = homeRef.value.scrollHeight;
  
  // 内容较少时填充空白，内容较多时自动适应
  if (contentNaturalHeight < availableHeight) {
    homeRef.value.style.minHeight = `${availableHeight}px`;
  } else {
    homeRef.value.style.minHeight = 'auto';
  }
};

// 初始化和窗口大小变化时调整
onMounted(adjustHomeHeight);
watchEffect(adjustHomeHeight);
</script>

<style scoped lang="scss">
// 变量定义
$gap: 8px;
$text-size: 16px;
$text-color: #333;
$highlight-color: #2c3e50;
$footer-text-color: #999;
// 细滚动条样式变量（宽度2px）
$scrollbar-width: 2px;
$scrollbar-radius: 1px;
$scrollbar-color: rgba(180, 180, 180, 0.2);
$scrollbar-hover: rgba(100, 100, 100, 0.4);

.app-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%; /* 充分利用1440px宽度 */
}

// 内容区（适配1440px宽度）
.home {
  flex: 1; 
  display: flex;
  flex-direction: column;
  gap: $gap; 
  width: 100%;
  overflow-y: auto;
  
  // 极细滚动条样式
  &::-webkit-scrollbar {
    width: $scrollbar-width;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: $scrollbar-radius;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: $scrollbar-color;
    border-radius: $scrollbar-radius;
    transition: background-color 0.2s;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background-color: $scrollbar-hover;
  }
  
  // Firefox适配
  scrollbar-width: thin;
  scrollbar-color: $scrollbar-color transparent;
}

// 文本样式（在1440px宽度下最佳阅读体验）
.welcome-text {
  margin: 0;
  font-size: $text-size;
  color: $text-color;
  line-height: 1.6; // 优化行高，适合宽屏阅读

  // 响应式调整
  @media (max-width: 768px) {
    font-size: $text-size - 2px;
  }
}

.welcome-text--highlight {
  color: $highlight-color;
  font-weight: 500;
}

// 页脚样式
.footer {
  margin-top: auto;
  padding-top: 15px;
  color: $footer-text-color;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #e7eaec;
  letter-spacing: 0.1rem;
  width: 100%;
}
</style>
